<template>
  <div style="width: 1400px">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item><a href="/default">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">食品</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">休闲食品</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">饼干蛋糕</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="">面包</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品名</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="7" style="width: 480px; margin-top: 30px">
        <el-carousel indicator-position="outside" height="450px">
          <el-carousel-item v-for="item in goodsImgs" :key="item.index">
            <img :src="item.url" />
            <pic-zoom :url="item.url" :scale="3"></pic-zoom>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="14" style="width: 750px">
        <el-form ref="form" :model="form" label-width="50px">
          <h2>卡吉士椰蓉面包箱休闲零食面包早餐糕点</h2>

          <div class="money">
            <el-form-item label="价格">
              <span style="font-size: 40px; color: red"> ￥55.00 </span>
              <span style="color: grey; text-decoration: line-through">
                ￥10.00
              </span>
            </el-form-item>
          </div>

          <el-form-item label="运费">
            <span> ￥5.00 </span>
          </el-form-item>
          <el-form-item label="口味">
            <el-button plain class="flavor">蓝莓</el-button>
          </el-form-item>
          <el-form-item label="规格">
            <tr>
              <td>
                <el-button plain class="specifications"
                  >纯蛋糕720g（一箱约3333个）</el-button
                >
              </td>
            </tr>
            <tr>
              <td>
                <el-button plain class="specifications"
                  >纯蛋糕奶香味360g（约17吨）</el-button
                >
              </td>
            </tr>
            <tr>
              <td>
                <el-button plain class="specifications"
                  >纯蛋糕奶香味360g（不加量加价）</el-button
                >
              </td>
            </tr>
            <tr>
              <td>
                <el-button plain class="specifications"> 尝鲜500g</el-button>
              </td>
            </tr>
          </el-form-item>

          <el-form-item label="数量">
            <el-input-number
              v-model="num"
              controls-position="right"
              @change="handleChange"
              :min="1"
              size="small"
              style="width: 85px"
            ></el-input-number>
            件
          </el-form-item>
          <el-form-item>
            <el-button type="danger" plain class="el-icon-shopping-cart-1 buy"
              >加入购物车</el-button
            >
            <el-button type="danger" class="buy">立即购买</el-button>
            <p style="font-size: 10px">
              <span class="el-icon-user"> </span>
              <span style="color: red">77</span>
              人已购买
            </p>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2" style="width: 150px" class="look">
        <div>
          <p class="title-text"><span>看了又看</span></p>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包6.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包2.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包1.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="width: 1380px">
      <el-col :span="2" style="width: 230px; margin-top: 0px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-button type="text" style="color: Gray"
              >水水食品旗舰店</el-button
            >
            <i class="el-icon-sunny" style="color: DeepPink"></i>
          </div>
          <div style="font-size: small">
            <div style="text-align: center; margin-left: 15px">
              <tr style="color: Gray">
                <td>描述</td>
                <td class="score">服务</td>
                <td class="score">物流</td>
              </tr>
              <tr style="color: red">
                <td>4.5</td>
                <td class="score">4.7</td>
                <td class="score">4.3</td>
              </tr>
            </div>
            <div style="margin-top: 10px">
              <tr style="font-size: 10px">
                <td>
                  <el-button type="info" size="small">进店逛逛</el-button>
                </td>
                <td>
                  <el-button
                    type="info"
                    plain
                    size="small"
                    style="margin-left: 10px"
                    >收藏店铺</el-button
                  >
                </td>
              </tr>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="20" style="width: 1000px">
        <el-tabs type="border-card">
          <el-tab-pane label="商品介绍">
            <tr>
              <td class="introduce">品牌：盼盼</td>
            </tr>
            <tr>
              <td class="introduce">商品名称：</td>
              <td class="introduce">商品编号：</td>
              <td class="introduce">店铺：</td>
              <td class="introduce">毛重：</td>
            </tr>
            <tr>
              <td class="introduce">商品产地：</td>
              <td class="introduce">口味：</td>
              <td class="introduce">包装形式：</td>
            </tr>

            <hr />

            <img
              src="../views/imgs/面包2.jpg"
              alt=""
              height="580px"
              width="780px"
            />
            <img
              src="../views/imgs/面包3.jpg"
              alt=""
              height="580px"
              width="780px"
            />
            <img
              src="../views/imgs/面包4.jpg"
              alt=""
              height="580px"
              width="780px"
            />
          </el-tab-pane>
          <el-tab-pane label="规格与包装">
            <tr>
              <td class="introduce">保质期：</td>
            </tr>
            <tr>
              <td class="introduce">产品标准号：</td>
            </tr>
            <tr>
              <td class="introduce">生产许可证号：</td>
            </tr>
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <el-col :span="2" style="width: 150px" class="look">
        <div>
          <p class="title-text"><span>猜你喜欢</span></p>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包5.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包2.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="width: 150px">
            <img
              src="../views/imgs/面包6.jpg"
              class="image"
              style="height: 120px"
            />
            <div style="padding: 3px">
              <div class="bottom">
                <el-button type="text" class="button"
                  >黄油面包400g*2箱糕点心休闲零食</el-button
                >
              </div>
              <div style="text-align: center">
                <span style="font-size: small">￥800.00</span>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      goodsImgs: [
        { url: require("@/views/imgs/面包1.jpg") },
        { url: require("@/views/imgs/面包2.jpg") },
        { url: require("@/views/imgs/面包3.jpg") },
        { url: require("@/views/imgs/面包4.jpg") },
        { url: require("@/views/imgs/面包5.jpg") },
        { url: require("@/views/imgs/面包6.jpg") },
      ],
    };
  },
  components: {
    
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped>
.introduce {
  text-align: left;
  width: 200px;
  padding-left: 50px;
  height: 25px;
  font-size: small;
  color: grey;
}

.flavor {
  margin-top: 5px;
}

.score {
  padding-left: 30px;
}
.specifications {
  margin-top: 10px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.buy {
  width: 130px;
}

.money {
  background-color: #f5f5f5;
}

.el-breadcrumb {
  background-color: #f5f5f5;
  line-height: 30px;
}

.el-card {
  margin-top: 10px;
}

.look {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.button {
  font-size: 17px;
  color: #666666;
  height: 30px;
}

.title-text span {
  display: block;
  position: relative;

  text-align: center;
}
.title-text span:before,
.title-text span:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #dddddd;
  width: 25%;
  height: 1px;
}
.title-text span:before {
  left: 5%;
}
.title-text span:after {
  right: 5%;
}

.el-breadcrumb-item {
  font-size: 14px;
}

.el-col {
  border-radius: 4px;
  margin-top: 10px;
}

/* .el-header {
} */
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
}
img {
  width: 100%;
  height: 100%;
}
</style>